<template>
  <template v-if="model == 1">
    <el-icon :size="size" :style="{ color: color }"
      ><component :is="iconName"></component
    ></el-icon>
  </template>
  <template v-else>
    <SvgIcon :name="iconName" :size="size" :color="color" />
  </template>
</template>

<script setup>
import { computed } from "vue";
import { iocns } from "@/util/allIcon";
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "",
  },
  size: {
    type: Number,
    default: 1,
  },
});
let arr1 = [];
let arr2 = [];
iocns.forEach((item, index) => {
  if (item.group == 1) {
    item.iconNames.forEach((child, cIndex) => {
      arr1.push(child);
    });
  } else if (item.group == 2) {
    item.iconNames.forEach((child, cIndex) => {
      arr2.push(child);
    });
  }
});
const model = computed(() => {
  if (arr1.includes(props.name)) {
    return 1;
  } else {
    return 2;
  }
});
const iconName = computed(() => props.name);
</script>

<style scoped>

</style>
